<template>
    <d2-container>
        <!-- 搜索表头 -->
        <template slot="header">
            <el-form :inline="true" :model="searchForm" ref="searchForm" size="small" v-if="showHeader"
                class="searchHeader">

                <el-form-item label="所属集团" prop="pkGroup">
                    <ec-group-tree-select ref="groupTreeSelect" v-model="searchForm.pkGroup"></ec-group-tree-select>
                </el-form-item>

                <el-form-item label="所属组织" prop="pkOrg">
                    <ec-org-tree-select ref="orgTreeSelect" v-model="searchForm.pkOrg" :pkGroup="searchForm.pkGroup">
                    </ec-org-tree-select>
                </el-form-item>

                <el-form-item label="下级部门" prop="pkFatherdept">
                    <ec-dept-tree-select ref="deptTreeSelect" v-model="searchForm.pkFatherdept"
                        :pkGroup="searchForm.pkGroup" :pkOrg="searchForm.pkOrg" placeholder="请选择部门">
                    </ec-dept-tree-select>
                </el-form-item>

                <el-form-item label="启用状态" prop="enableState">
                    <ec-dict-select v-model="searchForm.enableState" placeholder="启用状态" dictType="enable_state">
                    </ec-dict-select>
                </el-form-item>

                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="searchForm.deptName" placeholder="请输入部门名称" clearable />
                </el-form-item>

                <el-form-item label="操作">
                    <el-button type="primary" @click="getDataTable">
                        <d2-icon name="search" />
                        查询
                    </el-button>
                    <el-button @click="handleFormReset">
                        <d2-icon name="refresh" />
                        重置
                    </el-button>
                </el-form-item>

            </el-form>
        </template>

        <!-- 表格表头 -->
        <div class="table-header">
            <div>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addOrUpdate()">添加
                </el-button>
                <el-button type="primary" icon="el-icon-caret-top" size="small" v-if="!tigger"
                    @click="tableExpandTigger()">展开</el-button>
                <el-button type="primary" icon="el-icon-caret-bottom" size="small" v-else @click="tableExpandTigger()">
                    合并
                </el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteHandle()"
                    :disabled="!multipleSelection.length >0" v-if="isAuth('upms:dept:delete')">批量删除
                    <span v-if="multipleSelection.length >0">【{{multipleSelection.length}}条】</span>
                </el-button>
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
            </div>
            <div>
                <ec-prompt-button content="刷新" icon="el-icon-refresh" @click="getDataTable()"></ec-prompt-button>
                <ec-prompt-button content="搜索" icon="el-icon-search" @click="changeHeader()"></ec-prompt-button>
                <ec-prompt-button content="导入" icon="el-icon-download"></ec-prompt-button>
                <ec-prompt-button content="导出" icon="el-icon-upload2" @click="dataExport()"></ec-prompt-button>
                <ec-prompt-button content="分享" icon="el-icon-share"></ec-prompt-button>
            </div>
        </div>


        <!-- 表格表体 -->
        <ec-table :data="tabledata" ref="dataTable" row-key="pkDept"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}" v-loading="loading"
            @sort-change="tableSortChange" @selection-change="handleSelectionChange">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="groupName" header-align="center" align="center" show-overflow-tooltip label="所属集团">
            </el-table-column>
            <el-table-column prop="pkOrg" header-align="center" align="center" show-overflow-tooltip label="所属组织"
                sortable='custom'>
                <template slot-scope="scope">
                    <span>{{scope.row.orgName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="innerCode" header-align="center" align="center" show-overflow-tooltip label="内部编码"
                sortable='custom'>
            </el-table-column>
            <el-table-column prop="deptName" header-align="center" align="center" show-overflow-tooltip label="部门名称"
                sortable='custom'>
                <template slot-scope="scope">
                    <span class="isUrl"
                        @click="manageHandler(scope.row.pkDept)">{{scope.row.deptName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="enableStateDesc" header-align="center" align="center" show-overflow-tooltip
                label="启用状态">
            </el-table-column>
            <el-table-column prop="principalName" header-align="center" align="center" show-overflow-tooltip
                label="负责人">
            </el-table-column>
            <el-table-column prop="tel" header-align="center" align="center" show-overflow-tooltip label="电话">
            </el-table-column>
            <el-table-column prop="memo" header-align="center" align="center" show-overflow-tooltip label="备注">
            </el-table-column>
            <el-table-column prop="address" header-align="center" align="center" show-overflow-tooltip label="地址">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="180" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="manageHandler(scope.row.pkDept)"
                        class="el-icon-setting">管理
                    </el-button>
                    <el-button type="text" size="small" @click="addOrUpdate(scope.row.pkDept)" class="el-icon-edit">修改
                    </el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.pkDept)" class="el-icon-delete">
                        删除</el-button>
                </template>
            </el-table-column>
        </ec-table>

        <!-- 表格表尾 -->
        <template slot="footer">
            <!-- <el-button type="primary" size="mini" :loading="uploading" style="float:left;">
                <d2-icon name="cloud-upload" />
                Upload log data
            </el-button> -->
        </template>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataTable"></add-or-update>

        <manage v-if="manageVisible" ref="manage" @refreshDataList="getDataTable"></manage>
    </d2-container>
</template>

<script>
    import * as deptService from '@/api/upms/dept'
    import AddOrUpdate from './add-or-update'
    import Manage from './manage'

    export default {
        name: "upms-deptment-index",
        data() {
            return {
                searchForm: {
                    pkFatherdept: '',
                    enableState: 'Y',
                    deptName: '',
                    pkGroup: '',
                    pkOrg: '',
                    aes: '',
                    desc: '',
                },
                tigger: false,
                showHeader: true,
                tabledata: [],
                loading: false,
                addOrUpdateVisible: false,
                multipleSelection: [],
                manageVisible: false
            }
        },
        components: {
            AddOrUpdate,
            Manage
        },
        mounted() {
            this.getDataTable()
        },
        methods: {
            // 获取数据列表
            getDataTable() {
                this.loading = true
                let query = {
                    pkFatherdept: this.searchForm.pkFatherdept,
                    enableState: this.searchForm.enableState,
                    deptName: this.searchForm.deptName,
                    pkGroup: this.searchForm.pkGroup,
                    pkOrg: this.searchForm.pkOrg,
                    aes: this.searchForm.aes,
                    desc: this.searchForm.desc
                };
                deptService.getdepttree(query).then(data => {
                    this.tabledata = data;
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            manageHandler(pkDept) {
                this.manageVisible = true
                this.$nextTick(() => {
                    this.$refs.manage.init(pkDept)
                })
            },
            // 切换显示搜索表头
            changeHeader() {
                this.showHeader = !this.showHeader
            },
            // 重置搜索表单
            handleFormReset() {
                this.$refs.searchForm.resetFields()
                this.$refs.groupTreeSelect.resetFields()
                this.$refs.orgTreeSelect.resetFields()
                this.$refs.deptTreeSelect.resetFields()
            },
            // 表格排序
            tableSortChange(column) {
                // 升序
                if (column.order === 'ascending') {
                    // 从降序集合里找当前是否存在，存在则删除，不存在则加入到升序集合
                    let descArr = this.$splitString(this.searchForm.desc, ',');
                    if (descArr.findIndex(item => item === column.prop) > -1) {
                        descArr.splice(descArr.findIndex(item => item === column.prop), 1)
                    }
                    this.searchForm.desc = descArr.join(',')
                    let aesArr = this.$splitString(this.searchForm.aes, ',');
                    aesArr.push(column.prop);
                    this.searchForm.aes = aesArr.join(',')
                }
                // 降序
                if (column.order === 'descending') {
                    // 从降序集合里找当前是否存在，存在则删除，不存在则加入到升序集合
                    let aesArr = this.$splitString(this.searchForm.aes, ',');
                    if (aesArr.findIndex(item => item === column.prop) > -1) {
                        aesArr.splice(aesArr.findIndex(item => item === column.prop), 1)
                    }
                    this.searchForm.aes = aesArr.join(',')
                    let descArr = this.$splitString(this.searchForm.desc, ',');
                    descArr.push(column.prop);
                    this.searchForm.desc = descArr.join(',')

                }
                // 默认排序
                if (column.order === null) {
                    // 清楚升序和降序集合
                    let aesArr = this.$splitString(this.searchForm.aes, ',');
                    let descArr = this.$splitString(this.searchForm.desc, ',');
                    if (aesArr.findIndex(item => item === column.prop) > -1) {
                        aesArr.splice(aesArr.findIndex(item => item === column.prop), 1)
                    }
                    if (descArr.findIndex(item => item === column.prop) > -1) {
                        descArr.splice(descArr.findIndex(item => item === column.prop), 1)
                    }
                    this.searchForm.aes = aesArr.join(',')
                    this.searchForm.desc = descArr.join(',')
                }
                // 调用默认查询
                this.getDataTable()
            },
            // 新增 / 修改
            addOrUpdate(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 多选事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 删除/批量删除
            deleteHandle(id) {
                var ids = id ? [id] : this.multipleSelection.map(item => {
                    return item.pkDept
                })
                if (ids.length > 0) {
                    this.$confirm("确认删除[" + ids.length + "]条数据？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        deptService.deldept(ids).then(() => {
                            this.$message.success("删除成功！");
                            this.getDataTable();
                        });
                    });
                } else {
                    this.$message.error("请选择数据！")
                }
            },
            dataExport() {
                let query = {
                    pkFatherdept: this.searchForm.pkFatherdept,
                    enableState: this.searchForm.enableState,
                    deptName: this.searchForm.deptName,
                    pkGroup: this.searchForm.pkGroup,
                    pkOrg: this.searchForm.pkOrg,
                };
                deptService.deptExport(query).then(data => {
                    this.$message.success(data)
                })
            },
            // 展开/合并
            tableExpandTigger(row) {
                this.tigger = !this.tigger
                let rows = this.tabledata
                this.dg(rows, this.tigger)
            },
            dg(rows, status) {
                let that = this
                rows.forEach((item, index) => {
                    if (item.children) {
                        that.dg(item.children, status)
                        this.$refs.dataTable.$refs.elTable.toggleRowExpansion(item, status)
                    }
                })
            },
        }
    }
</script>